<template>
  <view class="header-box ss-flex ss-row-center">
    <!-- 返回按钮 -->
    <view class="custom-button" @tap="sheep.$router.go('/pages/index/user')">
      <img class="back" src="https://www.xiaomicang.com/static/back2.png" alt="返回" />
    </view>

    <!-- 标题 -->
    <view class="records-box">
      <text class="all-title">我的中奖记录</text>
    </view>
  </view>

  <!-- 表格内容 -->
  <view class="list-box">
    <view v-if="state.pagination.total > 0" class="table">
      <view
        class="table-row"
        v-for="record in state.pagination.data"
        :key="record.id"
      >
        <view class="table-cell time">{{ record.draw_time }}</view>
        <view class="table-cell prize">{{ record.prize_name }}</view>
      </view>
    </view>
    <s-empty v-else text="暂无中奖记录" icon="/static/data-empty.png" />
  </view>

  <!-- 加载更多 -->
  <uni-load-more
    v-if="state.pagination.total > 0"
    :status="state.loadStatus"
    :content-text="{ contentdown: '上拉加载更多' }"
    @tap="onLoadMore"
  />
</template>


<script setup>
	
import { computed, reactive, onMounted } from 'vue';
import sheep from '@/sheep';
import _ from 'lodash';

const pagination = {
  data: [],
  current_page: 1,
  total: 0,
  last_page: 1,
};

const state = reactive({
  pagination,
  loadStatus: '',
});

async function getLotteryRecords(page = 1) {
  state.loadStatus = 'loading';
  let res = await sheep.$api.user.lottery.log({
    list_rows: 10,
    page,
  });
  if (res.code === 1) {
    let list = _.uniqBy([...state.pagination.data, ...res.data.list.data], 'id');
    state.pagination = {
      ...res.data.list,
      data: list,
    };
    state.loadStatus = state.pagination.current_page < state.pagination.last_page ? 'more' : 'noMore';
  }
}

function onLoadMore() {
  if (state.loadStatus === 'loading' || state.loadStatus === 'noMore') return;
  getLotteryRecords(state.pagination.current_page + 1);
}

onMounted(() => {
  getLotteryRecords();
});


// function onChange(e) {
//   state.pagination = pagination;
//   state.currentTab = e.index;
//   getLotteryRecords();
// }
// function onLoadMore() {
//   if (state.loadStatus !== 'noMore') {
//     getLotteryRecords(state.pagination.current_page + 1);
//   }
// }
</script>
<style>
	.header-box {
	  display: flex;
	  align-items: center; /* 垂直居中 */
	  justify-content: center; /* 水平居中 */
	  position: relative; /* 为了支持返回按钮的绝对定位 */
	  background-color: #fff;
	  height: 150rpx; /* 根据需要调整 header 高度 */

	}
	.custom-button {
	  position: absolute; /* 使返回按钮脱离正常流，固定在左边 */
	  left: 20rpx; /* 距离左边的距离 */
	  display: flex;
	  align-items: center;
	}
	.table {
	  width: 100%;
	  border-collapse: collapse;
	}
	.table-row {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 10px 0;
	  border-bottom: 1px solid #e0e0e0;
	}
	.table-cell {
	  flex: 1;
	  padding: 0 8px;
	}
	.table-cell.time {
	  text-align: left;
	}
	.table-cell.prize {
	  text-align: right;
	}
	.icon-box {
	  font-size: 50rpx;
	  color: #333333;
	  margin-top: 42rpx;
	}
	
	.back {
	  width: 25rpx;
	  height: 25rpx;
	}
	
	/* 标题样式 */
	.records-box {
	  flex: 1; /* 使标题居中对齐 */
	  text-align: center;
	  	  margin-top: 60rpx;
	}
	
	.all-title {
	  font-size: 32rpx; /* 根据需要调整字体大小 */
	  font-weight: bold;
	}
</style>